$(".wrap").load("header.html");
$(".wrapper").load("bottom.html");
//放大镜
var imgmins=document.querySelectorAll('.content-l img');
var content=document.querySelector('.content-l');
var mask=document.querySelector('.mask');
var imgmaxs=document.querySelector('.max-c img');
var maxs=document.querySelector('.max');
// console.log(imgmins,content,mask,imgmaxs,max);
content.onmouseenter=function(){
    maxs.style.display='block';
    mask.style.display='block';
}
content.onmouseleave=function(){
    maxs.style.display='none';
    mask.style.display='none';
}
content.onmousemove=function(ev){
    var e=ev || event;
    var x= e.clientX- offset(content,false).left-mask.clientWidth/2;
    var y=e.clientY-offset(content,false).top-mask.clientHeight/2;
    // console.log(x,y);
    if(x<=0){
        x=0;
    }
    if(x>=(content.clientWidth-mask.clientWidth)){
        x=content.clientWidth-mask.clientWidth;
    }
    if(y<=0){
        y=0;
    }
    if(y>=(content.clientHeight-mask.clientHeight)){
        y=content.clientHeight-mask.clientHeight;
    }
    mask.style.left=x+'px';
    mask.style.top=y+'px';
    var scaleX = x / (content.clientWidth - mask.clientWidth);
    var scaleY = y / (content.clientHeight - mask.clientHeight);
    var X=scaleX*(imgmaxs.clientWidth-maxs.clientWidth)
    var Y=scaleY*(imgmaxs.clientHeight-maxs.clientHeight)
    imgmaxs.style.left=-X+'px';
    imgmaxs.style.top=-Y+'px';
}
// var imgs=document.querySelectorAll('.content-b img');
// for(var i=0;i<imgs.length;i++){
//     imgs[i].index=i;
//     imgs[i].onclick=function(){
//         // console.log($('.content-l img'));
//         // console.log( $('.max-c img'));
//         for(var n=0;n<$('.content-l img').length;n++){
//             $('.content-l img').removeClass('url')
//             $('.content-l img').eq(n).addClass('url')
//         }
        
//         for(var m=0;m<$('.max-c img').length;m++){
//             $('.max-c img').removeClass('url')
//             $('.max-c img').eq(m).addClass('url')
//         }
       
//     }
// }
//图片切换
$('.content-b img').mouseenter(function(){
    $('.content-l img').prop('src',$(this).prop('src'))
    $('.max-c img').prop('src',$(this).prop('src'))
})
//请求数据
$(function (){
    // 判断是否有数据
    if (localStorage.getItem('code')) {
        var code = localStorage.getItem('code');
        // 加载数据
        $.ajax({
            url: '../json/json3.json',
            type: 'get',
            dataType: 'json',
            success: function (jsonArr){
                    $.each(jsonArr,function(index,item){
                        if (code == item.id) {
                            $('.shopping .title').text(item.title);
                            $('.content-r p').text(item.title);                         
                            $('.price span').text(item.price);
                            $('.xiaoshou h3').text(item.yishou);
                            $('.content-l img').eq(0).prop('src',item.src1);
                            $('.max-c img').eq(0).prop('src',item.src1);
                            $('.content-b li img').eq(0).prop('src',item.src1);
                            $('.content-b li img').eq(1).prop('src',item.src2);
                            $('.content-b li img').eq(2).prop('src',item.src3);
                            $('.content-b li img').eq(3).prop('src',item.src4);
                            $('.content-b li img').eq(4).prop('src',item.src5);
                            $('.page-img img').eq(0).prop('src',item.src6)
                            $('.page-img img').eq(1).prop('src',item.src7)
                            $('.page-img img').eq(2).prop('src',item.src8)
                            $('.page-img img').eq(3).prop('src',item.src9)
                            $('.page-img img').eq(4).prop('src',item.src10)
                            $('.page-img img').eq(5).prop('src',item.src11)
                            $('.page-img img').eq(6).prop('src',item.src12)
                            $('.page-img img').eq(7).prop('src',item.src13)
                            $('.page-img img').eq(8).prop('src','')
                            $('.page-img img').eq(9).prop('src','')
                            $('.page-img img').eq(10).prop('src','')
                            $('.page-img img').eq(11).prop('src','')
                            $('.page-img img').eq(12).prop('src','')
                        }
                        // localStorage.clear();
                    })
            }
        })
    }
});